<template>
	<view class="videoContainer">
		<!-- 头部区域 -->
		<view class="header">
			<image src="/static/images/video/video.jpg"></image>
			<view class="search"  @tap="toSearch">搜索歌曲</view>
			<image src="/static/images/logo.png"></image>
		</view>
		
		<!-- 导航区 -->
		<scroll-view scroll-x class="navScroll" enable-flex
		:scroll-into-view="'scroll' + navId" scroll-with-animation>
			<view class="navItem" v-for="(item,index) in videoGroupList" :key="item.id" :id="'scroll' + item.id">
				<view :class="navId == item.id ? 'navContent active': 'navContent'" 
				@click="changeNav" :id="item.id">
				{{item.name}}</view>
			</view>
		</scroll-view>
		<cover-view class="mask" @tap="hideComment" :style="isShow ? 'display:block' : 'display:none'"></cover-view>
		<!-- 视频列表区域 -->
		<scroll-view scroll-y="true" class="videoScroll"
		@refresherrefresh="handleRefresh" refresher-enabled
		:refresher-triggered="isRefresh" @scrolltolower="handleTolower"
		>
			
			<view class="videoItem" v-for="(item,index) in videoList" :key="index">
				<video direction="90" danmu-btn enable-play-gesture autoplay
				:src="item.data.urlInfo.url" @play="handlePlay" objectFit="fill"
				:title="item.data.title" :id="item.data.vid" :poster="item.data.coverUrl" 
				class="common" v-if="videoId === item.data.vid"
				@timeupdate="handleTimeUpdate" @ended="handleEnded"></video>
				<!-- 性能优化：使用Image代替video封面 -->
				<image v-else @click="handlePlay" :id="item.data.vid" class="common" :src="item.data.coverUrl"></image>
				
				<view class="content" >{{item.data.title}}</view>
				
				<view class="footer">
				    <image class="avatar" :src="item.data.creator.avatarUrl"></image>
				    <text class="nickName">{{item.data.creator.nickname}}</text>
				    <view class="comments_praised">
						<text class="item">
							<text class="iconfont icon-follow"></text>
				            <text class="count">{{item.data.praisedCount}}</text>
				        </text>
				        <text class="item" @tap="showComment(item.data.vid,item.type)">
				            <text class="iconfont icon-pinglun"></text>
				            <text class="count">{{item.data.commentCount}}</text>
				        </text>
				        <button open-type="share" class="item btn">
				            <text class="iconfont icon-gengduo"></text>
				        </button>
				    </view>
				</view>
			</view>
			<view class="isOver" v-if="isOver">{{isover}}</view>
		</scroll-view>
		<commentArea :isShow="isShow" :commentData="commentData" :totalCount="totalCount"></commentArea>
	</view>
</template>

<script>
	import commentArea from '../../components/commentArea/commentArea'
	export default {
		data() {
			return {
				videoGroupList:[],// 导航标签数据
				navId:'',// 导航的id
				videoList:[],// 对应导航的视频数据
				videoId:'',// 存储视频每次点击的vid
				videoSeek:[],// 存储所有视频对应vid的播放时长
				isRefresh: false,// 标示视频scroll-view下拉刷新是否被触发
				isOver: false,
				isover:'',
				isShow:false,
				commentData:[],
				totalCount:''
			}
		},
		components:{commentArea},
		onLoad() {
			// 获取导航标签数据
			this.getVideoGroupList()
		},
		methods:{
			// 获取导航标签数据
			async getVideoGroupList(){
				let res = await this.$myRequest('/video/group/list')
				this.videoGroupList = res.data
				// console.log(res,'aa')
				// 默认进来第一个高亮
				this.navId = res.data[0].id
				// 因为sync异步操作 非阻塞了navId的值为空 
				// 获取对应导航的视频数据
				this.getVideoList(this.navId)
				
			},
			// 获取对应导航的视频数据
			async getVideoList() {
				// 需要先登录携带cookie才有视频数据
				let uInfo = uni.getStorageSync('userInfo')
				
				let res = await this.$myRequest('/video/group',{id:this.navId})
				// #ifdef MP-WEIXIN
				// 关闭showloading
				uni.hideLoading()
				if(!uInfo.length) {
					this.$myShowToastErr('请先登录') 
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},2000)
					}
				this.videoList = res.datas
				// #endif
				
				// #ifdef H5
				if(!uInfo.length) {
					this.$myShowToastErr('请先登录')	
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},2000)
					}
				else{
					
					uni.hideLoading()
					this.videoList = res.datas
				}
				// #endif
				if(res.msg == '暂无推荐视频，请稍后再试'){
					this.$myShowToastErr('暂无推荐视频')
				}
				
				// 关闭下拉刷新
				this.isRefresh = false
			},
			// 点击按钮切换导航给对应ID添加 下边框
			changeNav(event) {
				let nId = event.currentTarget.id
				// nId为字符串 但是item.id却是number 所以*1
				// 或者两个==是判断值是否相等,三个===判断类型
				this.navId = nId
				// 每次切换先清空原有数据
				this.videoList = []
				this.isover = ''
				// 给用户体验优化,需要调用hideLoading才能关闭
				uni.showLoading({
					title:'正在加载'
				})
				// 获取对应导航的视频数据
				this.getVideoList()
				
			},
			// 控制视频播放暂停
			handlePlay(event){
				/*问题： 多个视频同时播放的问题
				* 需求：
				*   1. 在点击播放的事件中需要找到上一个播放的视频
				*   2. 在播放新的视频之前关闭上一个正在播放的视频
				* 关键：
				*   1. 如何找到上一个视频的实例对象
				*   2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
				* 单例模式：
				*   1. 需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象，
				*   2. 节省内存空间
				*/
				// 执行顺序
				let vid = event.currentTarget.id //1 . 获取video组件的id 
				// 是用来图片代替视频性能优化下面的代码就不需要了
				// 关闭上一个播放的视频  前两个为true 就执行最后的stop
				// this.vid !== vid && this.videoContext && this.videoContext.stop()
				// if(this.vid !== vid &){
				// 	iF(this.videoContext){this.videoContext.stop()}
				// }
				// this.vid = vid
				
				// 更新videoId
				this.videoId = vid
				// 2. 创建videoContext实例
				this.videoContext = uni.createVideoContext(vid)
				// 判断当前的视频之前是否播放过
				let vItem = this.videoSeek.find(item => (item.vid === vid))
				// 如果有就跳转之前的播放位置
				if(vItem){
					this.videoContext.seek(vItem.time)
				}
				// // 点击图片,自动播放对应vid的视频
				// this.videoContext.play() 这个有Bug, 在video标签设置autoplay
				
				
			},
			// 用来监听视频播放进度的回调
			async handleTimeUpdate(event){
				// console.log(event);
				let videoTime = {vid:event.currentTarget.id,time:event.detail.currentTime}
				/**思路： 判断记录播放时长的videoSeek数组中是否有当前视频的播放记录
				 *1. 如果有，在原有的播放记录中修改播放时间为当前的播放时间
				 *2. 如果没有，需要在数组中添加当前视频的播放对象* */
				 // 在videoSeek数组中查找跟videoTime.vid匹配
				let vSeek = this.videoSeek
				let vItem = vSeek.find(item => (item.vid === videoTime.vid)) 
				if(vItem){// 之前有
					// 实时更新时长
					vItem.time = event.detail.currentTime
				}else{// 之前没有 push进去
					this.videoSeek.push(videoTime)
				}
				// 更新数据
				this.videoSeek = vSeek
			},
			// 监听视频播放结束时触发
			handleEnded(event){
				// console.log(event);
				// 查找对应id的下标
				let vid = this.videoSeek.findIndex(item => item.vid === event.currentTarget.id)
				// 移除videoSeek数组里对应id记录的播放时长
				this.videoSeek.splice(vid,1)
				// 更新数据
				// this.videoSeek = this.videoSeek
			},
			// 视频scroll-view自定义下拉刷新
			handleRefresh() {
				// 在使用前要先在scroll-view标签开启自定义下拉刷新refresher-enabled
				// console.log('下拉刷新');
				this.videoList = []
				setTimeout(() => {
					this.getVideoList()
				},1000)
				this.isRefresh = true
			},
			// 视频scroll-view 自定义上拉加载
			handleTolower(){
				// console.log('上拉加载');
				this.isOver = true
				this.isover = '已经到底了'
			},
			toSearch(){ // 跳转到搜索音乐页面
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			showComment(vId,vType){ // 点击显示评论区
				this.isShow = true
				this.getCommentData(vId,vType)
			},
			async getCommentData(videoId,videoType){
				// 判断资源类型：歌曲 mv 歌单 电台
				if(videoType == 1) { 
					this.resourceType = 5 
				}else {
					this.resourceType = 1
				}
				const comment = await this.$myRequest('/comment/new',
				{ id:videoId, pageSize: 10, pageNo: 1, sortType: 2, type: this.resourceType})
				this.commentData = comment.data.comments
				this.totalCount = comment.data.totalCount
				let moment = require('moment')
				this.commentData.forEach(item => { // 处理时间
					item.time = moment(item.time).format('yyyy年M月d日')
				})
				console.log(comment);
			},
			hideComment(){
				this.isShow = false
			}
		},
		// 用户点击右上角分享
		onShareAppMessage(res) {
			console.log(res);
			// from:'menu'
			if(res.from === 'button'){
				return {
					title: '来自button的转发',
				    page: '/pages/video/video',
				    imageUrl: '/static/images/nvsheng.jpg'
				}
			}else {
				return {
					title: '来自menu的转发',
				    page: '/pages/video/video',
				    imageUrl: '/static/images/nvsheng.jpg'
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.videoContainer {
		// 头部样式
		.header {
			display: flex;
			padding: 10rpx;
			image {
				width: 60rpx;
				height: 60rpx;
			}
			.search {
				border: 1rpx solid #ccc;
				/*flex-grow: 可拉伸 flex-shrink： 可压缩 flex-basis: 当前元素的宽度*/
				/*flex默认值: flex-grow: 0, flex-shrink: 1, flex-basis: auto*/
				/*flex:1  flex-grow: 1, flex-shrink: 1, flex-basis: 0%*/
				/*flex:auto  flex-grow: 1, flex-shrink: 1, flex-basis: auto*/
				/*flex: 1会导致父元素宽度自动为100%*/
				// 图片已经设置固定宽高,剩下的空间有它全占
				flex: 1;
				margin: 0 20rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
				color: #808080;
			}
		}
		
		// 导航样式
		.navScroll {
			/* #ifdef MP-WEIXIN */
			display: flex;
			/* #endif */
			height: 60rpx;
			white-space: nowrap; // H5支持横向排列滚动必须加的属性
			
			
			.navItem {
				/* #ifdef H5 */
				display: inline-block;// H5支持
				/* #endif */
				padding: 0 30rpx;
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				.active {
					border-bottom: 3rpx solid #d43c33;
				}
				.navContent {
					height: 60rpx;
					box-sizing: border-box;
					/* #ifdef H5 */
					display: inline-block;// H5支持
					/* #endif */
				}
			}
			
		}
		.mask{
			width: 100%;
			height: 400rpx;
		}
		// 视频滚动样式
		.videoScroll{
			margin-top: 10rpx;
			// 竖向滚动时,需要给scroll-view设置一个高度
			// calc  可以动态计算css的宽高
			// 视口单位： vh vw  1vh = 1%的视口高度  1vw = 1%的视口宽度
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 150rpx); //140rpx 头部和导航的高度总和
			/* #endif */
			/* #ifdef H5 */
			height: calc(100vh - 350rpx);
			/* #endif */
			.videoItem {
				padding: 0 3%;
				// 视频图片共用样式
				.common {
					width: 100%;
					height: 360rpx;
					border-radius: 10rpx;
				}
				
				.content {
					font-size: 26rpx;
					height:80rpx;
					line-height: 80rpx;
					max-width: 500rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.footer {
					border-top: 1rpx solid #eee;
					padding: 20rpx 0;
					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						vertical-align: middle;
					}
					.nickName {
						font-size: 26rpx;
						vertical-align: middle;
						margin-left: 20rpx;
					}
					.comments_praised {
						float: right;
						.btn {
						  display: inline;
						  padding: 0;
						  background-color: transparent;
						  border-color: transparent;
						}
						.btn:after {
							border: none;
						}
						.item {
							margin-left: 50rpx;
							position: relative;
							.count {
								position: absolute;
								top: -25rpx;
								left: -15rpx;
								text-align: center;
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}
		.isOver{
			position: absolute;
			left: 0rpx;
			width: 100%;
			text-align: center;
			color: #C0C0C0;
			font-size: 25rpx;	
			// border-top: 2rpx solid #ccc;
			padding-top: 20rpx ;
		}
	}
</style>
